<template>
	<view class="home">
		<view class="tabs">
			<u-tabs :scrollable="true" :list="navlist" lineWidth="30" lineHeight="3" :activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.30)'
		    }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1.25)'
		    }" @click="clickNav">
			</u-tabs>
		</view>

		<view class="loadingState" v-show="!loadState" v-for="i in limitNum">
			<u-skeleton rows="3" title loading></u-skeleton>
		</view>

		<view class="content">
			<view class="item" v-for="item in dataList">
				<BlogItem @delEvent="P_delEvent" :item="item" :userID="userID" :isLike.sync="item.isLike"
					:like_count.sync="item.like_count"></BlogItem>
			</view>
		</view>

		<view>
			<uni-load-more :status="uniLoad"></uni-load-more>
		</view>

		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>

	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				uniLoad: "more",
				noMore: false,
				navlist: [{
						name: "最新",
						type: "publish_date"
					},
					{
						name: "热门",
						type: "view_count"
					}
				],
				userID: null,
				navAction: 0,
				dataList: [],
				limitNum: 5,
				loadState: false,
			}
		},
		onLoad() {
			this.getData()
			this.hasLogin = this.hasLogin
		},
		onShow() {
			this.hasLogin = this.hasLogin
		},
		computed: {
			hasLogin: {
				get() {
					return store.hasLogin
				},
				set(newVal) {
					if (newVal) {
						this.userID = uniCloud.getCurrentUserInfo().uid
					} else {
						this.userID = null
					}
				}
			}
		},
		onPullDownRefresh() {
			this.dataList = []
			this.loadState = false
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		//触底加载更多
		onReachBottom() {
			this.uniLoad = 'loading'
			if (this.noMore) return this.uniLoad = "noMore";
			this.getData()
		},
		methods: {
			P_delEvent(itemID) {
				this.dataList = this.dataList.filter(item => item._id != itemID);
				// this.getData();
			},
			//获取文章列表
			async getData() {
				let artTemp = db.collection("cloud_fishCircle-article").where(`delState != true`).field(
						"_id,title,user_id,description,picurls,comment_count,like_count,view_count,publish_date")
					.getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(artTemp, userTemp).orderBy(this.navlist[this.navAction].type, "desc").skip(this.dataList
						.length).limit(
						this.limitNum).get()
					.then(async res => {
						console.log(res)
						let idArr = []
						let oldArr = this.dataList;

						if (res.result.data.length == 0) {
							this.noMore = true
						}

						let resDataArr = [...oldArr, ...res.result.data]

						if (store.hasLogin) {
							resDataArr.forEach(item => {
								idArr.push(item._id);
							})

							let likeRes = await db.collection("cloud_fishCircle-like").where({
								article_id: dbCmd.in(idArr),
								user_id: uniCloud.getCurrentUserInfo().uid
							}).get()

							likeRes.result.data.forEach(item => {
								let findIndex = resDataArr.findIndex(find => {
									return item.article_id == find._id
								})
								resDataArr[findIndex].isLike = true
							})
						}

						this.dataList = resDataArr
						this.loadState = true
					})
			},
			// 切换nav
			clickNav(e) {
				this.loadState = false;
				this.dataList = [];
				this.uniLoad = "more"
				this.navAction = e.index;
				this.noMore = false
				this.getData();
			},
			// 跳转至编辑页面
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit?metN=" + "add"
				})
			},
		}

	}
</script>

<style lang="scss">
	.home {
		padding-bottom: 230rpx;

		.tabs {}

		.loadingState {
			padding: 30rpx;
		}

		.content {
			.item {
				padding: 15rpx 15rpx 0;
				border-bottom: #F7F7F7 15rpx solid
			}
		}

		.edit {
			width: 120rpx;
			height: 120rpx;
			position: fixed;
			bottom: calc(var(--window-bottom) + 50rpx);
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 100;
			background-color: #0199FE;
			box-shadow: 0 0 15rpx rgba(1, 153, 254, 0.8);
			border-radius: 50%;

			.iconfont {
				font-size: 50rpx;
				color: #fff;
			}
		}
	}
</style>